<template>
    <div class="cinema-search">
        <div class="search-head">
            <div class="search-input">
                 <i class="iconfont icon-sousuo"></i><input type="text" v-model="search" placeholder="输入影院名称">
            </div>
            <div class="cancel" @click="$router.go(-1)">取消</div>
        </div>
        <div class="suggest">
            <template v-if="searchArr.length > 0">
              <ul class="suggest-list">
                <li v-for="(item,index) in searchCinema" :key="index">
                    <div class="left">
                        <p class="cinema-name">{{item.name}}</p>
                        <p class="cinema-address">{{item.address}}</p>
                    </div>
                    <div class="right">
                        <div class="cinema-price">
                            <template v-if="item.lowPrice">￥{{item.lowPrice/100}}起</template>
                        </div>
                        <div class="cinema-distance">
                            <template>{{item.Distance > 1 ? item.Distance.toFixed(2) + 'km' : (item.Distance ? item.Distance.toFixed(2)*100 + 'm' : '距离未知')}}</template>
                        </div>
                    </div>
                </li>
              </ul>
            </template>
            <template v-else-if="nomatch">
                <div class="nomatch">
                    <img src="@/assets/no-cinema.png" alt="">
                    <p>没有找到匹配的影院</p>
                    <p>提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？ </p>
                </div>
            </template>
            <template v-else>
                <h5>离你最近</h5>
                <div class="suggest-list">
                    <ul class="clearfix suggest-li">
                        <li v-for="(item, index) in suggset" class="suggest-litem" :key="index">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'cinemaSearch',
  data () {
    return {
      suggset: [],
      search: '',
      searchCinema: [],
      nomatch: false
    }
  },
  computed: {
    ...mapState([
      'cinema'
    ]),
    searchArr () {
      return this.searchCinema
    }
  },
  created () {
    this.getSuggest()
  },
  watch: {
    search (newVal, oldVal) {
      // 如果我们input框中的内容为空，那么就什么也不显示
      if (!this.search) {
        this.nomatch = false
      }
      if (newVal) {
        var reg = new RegExp(newVal)
        var arr = []
        this.cinema.forEach(item => {
          if (reg.test(item.name)) {
            arr.push(item)
          }
        })
        this.searchCinema = arr
        // 判断是否匹配上了影城
        if (arr.length === 0) {
          this.nomatch = true
        } else { // 没匹配上就会显示找不到影院
          this.nomatch = false
        }
      } else { // 如果搜索框中的内容为空
        this.searchCinema = []
      }
    }
  },
  methods: {
    /**
     * 推荐的影院就是离我们最近的五家影院
     *  */
    getSuggest () {
      for (var i = 0; i < this.cinema.length - 1; i++) {
        for (var j = i + 1; j < this.cinema.length; j++) {
          if (this.cinema[i].Distance > this.cinema[j].Distance) {
            [this.cinema[i], this.cinema[j]] = [this.cinema[j], this.cinema[i]]
          }
        }
      }
      for (var im = 0; im < 5; im++) {
        this.suggset.push(this.cinema[im])
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.cinema-search{
    display: flex;
    flex-direction: column;
    height: 100%;
    .search-head{
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        padding: px2rem(9.5) px2rem(15);
        border-bottom: 1px solid #ccc;
        height: px2rem(50);
    }
    .search-input{
        width: px2rem(302);
        height: px2rem(30);
        display: flex;
        background-color: #f4f4f4;
        .icon-sousuo{
            width: px2rem(30);
            height: px2rem(30);
            line-height: px2rem(30);
            text-align: center;
            font-size: px2rem(20);
        }
        input{
            width: px2rem(237);
            height: px2rem(30);
            border: 0;
            background-color: #f4f4f4;
            font-size: px2rem(16);
        }
    }
    .cancel{
        font-size: px2rem(18);
        margin-left: px2rem(5);
        width: px2rem(40);
        height: px2rem(30);
        line-height: px2rem(30);
    }
    .suggest{
        flex: 1;
        margin-top: px2rem(20);
        padding: px2rem(10) px2rem(5);
        overflow: hidden;
        h5{
            font-size: px2rem(13);
            color: #bdc0c5;
        }
        ul.suggest-li{
            margin-top: px2rem(20);
        }
        .suggest-litem{
            float: left;
            background-color: hsla(0, 0%, 96%, 0.6);
            font-size: px2rem(13);
            height: px2rem(30);
            line-height: px2rem(30);
            padding: px2rem(8) px2rem(12);
            margin: {
                right: px2rem(10);
                bottom: px2rem(10);
            }
        }
        ul.suggest-list{
          width: 100%;
          height: 100%;
          overflow-y: auto;
          li{
            width: px2rem(355);
            padding: px2rem(10) px2rem(10);
            display: flex;
            justify-content: space-between;
            }
            .left{
              width: px2rem(256);
              .cinema-name{
                  font-size: px2rem(15);
                  color: #191a1b;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
              }
              .cinema-address{
                  font-size: px2rem(12);
                  color: #797d82;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
              }
            }
            .right{
                .cinema-price{
                    font-size: px2rem(15);
                    color: #ff5f16;
                    height: px2rem(20);
                    text-align: center;
                }
                .cinema-distance{
                    color: #797d82;
                    font-size: px2rem(12);
                    text-align: center;
                }
            }
        }
        .nomatch{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: center;
            img{
                align-self: center;
                width: px2rem(90);
                height: px2rem(90);
            }
            p{
                color: #bdc0c5;
                font-size: px2rem(11);
                padding: 0 px2rem(86);
            }
        }
    }
}
</style>
